<template>
  <div class="app-container">
    <el-form :model="searchForm" :inline="true">
      <el-row>
        <el-col :span="18">
          <el-form-item>
            <el-input
              v-model="searchForm.fuzzy"
              clearable
              style="width:350px"
              placeholder="仪器名称/仪器编号/仪器型号"
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
          <el-form-item prop="type" label="检测类别">
            <el-select
              v-model="searchForm.type"
              style="width: 145px"
              placeholder="请选择检测类别"
              clearable
            >
              <el-option
                v-for="item in classTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="iconfont icon-chaxun1"
              @click="handleSearch"
            >
              查询</el-button
            >
            <!-- <el-button type="primary" @click="handleDownload"> 导出</el-button> -->
          </el-form-item>
        </el-col>
        <el-col :span="6" class="search-right">
          <el-button
            type="text"
            icon="el-icon-download"
            @click="handleDownload()"
            >仪器使用记录导出</el-button
          >
          <el-button type="text" icon="el-icon-refresh" @click="handleSearch"
            >刷新</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        stripe
        border
        :data="customerData"
        highlight-current-row
        :header-cell-style="{ background: '#ECF3FC' }"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <div class="table_empty">
            <div class="empty_tips">
              <span> 暂无数据, </span>
            </div>
          </div>
        </template>
        <el-table-column
          type="selection"
          fixed="left"
          width="55"
          align="center"
        />
        <el-table-column
          type="index"
          width="50px"
          label="序号"
          fixed="left"
          align="center"
        />
        <el-table-column
          prop="number"
          label="仪器编号"
          width="200"
          fixed="left"
          align="center"
        />
        <el-table-column prop="name" label="仪器名称" align="center" />
        <el-table-column prop="model" label="仪器型号" align="center" />
        <el-table-column
          prop="manufacturer"
          width="140"
          label="仪器品牌"
          align="center"
        />
        <el-table-column
          prop="type"
          width="110px"
          label="仪器类别"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.type == '1'">现场采样仪器</span>
            <span v-if="scope.row.type == '2'">现场检测仪器</span>
            <span v-if="scope.row.type == '3'">实验室仪器</span>
            <span v-if="scope.row.type == '4'">校准仪器</span>
            <span v-if="scope.row.type == '5'">样品制备仪器</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="department"
          label="所属部门"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="subList[0].number"
          width="100"
          label="辅助仪器编号"
          align="center"
        />
        <el-table-column
          prop="subList[0].name"
          label="辅助仪器名称"
          width="110px"
          align="center"
        />
        <el-table-column
          prop="userName"
          label="使用人"
          width="110px"
          align="center"
        />
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="110px"
          align="center"
        />
        <el-table-column
          prop="start"
          label="开机时间"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="end"
          label="关机时间"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="isIntact"
          label="使用后仪器状况"
          width="120px"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.isIntact == '1'"
              type="success"
              style="background: #13CE66;padding: 20px;color: #fff;;"
              >正常</span
            >
            <span
              v-if="scope.row.isIntact == '2'"
              style="background: #ff1100;padding: 20px;color: #fff;;"
              >异常</span
            >
          </template>
        </el-table-column>

        <el-table-column fixed="right" align="center" label="操作" width="130">
          <template slot-scope="scope">
            <el-button
              Permi="['order:list:add']"
              type="text"
              @click="handleTransfer(scope.row)"
            >
              查看使用记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNumber"
        :limit.sync="searchForm.pageSize"
        @pagination="handleSearch"
      />
    </div>

    <el-dialog
      title="仪器使用历史记录"
      :visible.sync="transferDialogVisible"
      width="65%"
      center
      :close-on-click-modal="false"
    >
      <div class="install-title">仪器基础信息</div>
      <el-form label-width="80px">
        <el-row :gutter="14">
          <el-col :span="6">
            <el-form-item label="仪器编号:">
              {{ chooseSearchForm.number }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仪器名称:">
              {{ chooseSearchForm.name }}</el-form-item
            >
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号规格:">
              {{ chooseSearchForm.model }}</el-form-item
            >
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产厂家:">
              {{ chooseSearchForm.manufacturer }}</el-form-item
            >
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item label="仪器类别:">
              <span v-if="chooseSearchForm.type == '1'">现场采样仪器</span>
              <span v-if="chooseSearchForm.type == '2'">现场检测仪器</span>
              <span v-if="chooseSearchForm.type == '3'">实验室仪器</span>
              <span v-if="chooseSearchForm.type == '4'">校准仪器</span>
              <span v-if="chooseSearchForm.type == '5'">样品制备仪器</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检测类别:">
              <span v-if="chooseSearchForm.classType == '1'"> 水</span>
              <span v-if="chooseSearchForm.classType == '2'">气</span>
              <span v-if="chooseSearchForm.classType == '3'">噪声</span>
              <span v-if="chooseSearchForm.classType == '4'"
                >土壤、底泥、固废、污泥和生活垃圾</span
              >
              <span v-if="chooseSearchForm.classType == '5'">样品制备</span>
              <span v-if="chooseSearchForm.classType == '6'">小型分析仪器</span>
              <span v-if="chooseSearchForm.classType == '7'">色谱仪 </span>
              <span v-if="chooseSearchForm.classType == '8'">光谱仪</span>
              <span v-if="chooseSearchForm.classType == '9'">质谱仪</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div
        style=" 
          display: flex;
          align-items: center;
          line-height: 50px;
          padding-left: 20px;
          color: #fff;
          background-color: #d7dae2;
          flex-wrap: wrap;
          justify-content: space-between
          margin-bottom: 10px;"
      >
        <div>仪器使用记录</div>
        <div class="block" style="margin: 0 40px 0 0">
          <span class="demonstration">日期选择：</span>
          <el-date-picker
            type="daterange"
            v-model="startEnd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeStartEnd"
          >
          </el-date-picker>
        </div>
      </div>
      <el-table
        :model="searchForm"
        border
        stripe
        :data="transferTableData"
        highlight-current-row
        :header-cell-style="{ background: '#ECF3FC' }"
        style="width: 100%"
        ref="transferTableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          fixed="left"
          width="55"
          align="center"
        />
        <el-table-column
          type="index"
          width="50"
          label="序号"
          fixed="left"
          align="center"
        />
        <el-table-column
          prop="jobId"
          label="任务单号"
          width="150"
          fixed="left"
          align="center"
        />
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="120"
          align="center"
        />

        <el-table-column
          prop="classType"
          label="检测项目"
          width="110px"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.classType == '1'"> 水</span>
            <span v-if="scope.row.classType == '2'">气</span>
            <span v-if="scope.row.classType == '3'">噪声</span>
            <span v-if="scope.row.classType == '4'"
              >土壤、底泥、固废、污泥和生活垃圾</span
            >
            <span v-if="scope.row.classType == '5'">样品制备</span>
            <span v-if="scope.row.classType == '6'">小型分析仪器</span>
            <span v-if="scope.row.classType == '7'">色谱仪 </span>
            <span v-if="scope.row.classType == '8'">光谱仪</span>
            <span v-if="scope.row.classType == '9'">质谱仪</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="subList[0].number"
          label="辅助仪器编号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="subList[0].name"
          label="辅助仪器名称"
          width="110"
          align="center"
        />
        <el-table-column
          prop="department"
          label="使用部门"
          width="110px"
          align="center"
        />
        <el-table-column
          prop="userName"
          label="使用人"
          width="110px"
          align="center"
        />
        <el-table-column
          prop="start"
          label="开机时间"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="end"
          label="关机时间"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="isIntact"
          label="使用后仪器状况"
          width="120px"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.isIntact == '1'"
              style="background: #13CE66;padding: 20px;color: #fff;;"
              >正常</span
            >
            <span
              v-if="scope.row.isIntact == '2'"
              style="background: #ff1100;padding: 20px;color: #fff;;"
              >异常</span
            >
          </template>
        </el-table-column>

        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleUpdate1(scope.row)">
              修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="transferDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDownloadData()"
          >使用记录下载</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="修改"
      :visible.sync="customerDialogVisible"
      width="30%"
      center
      :close-on-click-modal="false"
    >
      <el-form
        ref="customForm1"
        :model="customForm1"
        :rules="customRules"
        label-width="130px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="开机时间:">
              <el-input v-model="customForm1.start" style="width: 200px" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="关机时间:">
              <el-input v-model="customForm1.end" style="width: 200px" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="isIntact" label="使用后仪器状况:">
              <el-select
                v-model="customForm1.isIntact"
                style="width: 200px"
                placeholder="请选择检测类别"
              >
                <el-option
                  v-for="item in isIntactList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="customerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDialog">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as customerServer from "@/api/Recording";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
export default {
  name: "CustomerList",
  components: { Pagination },
  data() {
    return {
      selectedId: null,
      transferTableData: [],
      customerData: [],
      customeData: [],
      searchForm: {
        pageNumber: 1,
        pageSize: 10
      },
      chooseSearchForm: {},
      total: 0,
      startEnd: [],
      customForm1: {
        cusContBaseInfoId: "",
        jobId: "",
        projectName: "",
        classType: "",
        department: "",
        userName: "",
        end: "",
        start: "",
        isIntact: "",
        subList: [
          {
            id: "",
            name: "",
            number: ""
          }
        ]
      },
      classTypeList: [
        {
          name: "水",
          id: 1
        },
        {
          name: "气",
          id: 2
        },
        {
          name: "噪声",
          id: 3
        },
        {
          name: "土壤、底泥、固废、污泥和生活垃圾",
          id: 4
        },
        {
          name: "样品制备",
          id: 5
        },
        {
          name: "小型分析仪器",
          id: 6
        },
        {
          name: "色谱仪",
          id: 7
        },
        {
          name: "光谱仪",
          id: 8
        },
        {
          name: "质谱仪",
          id: 9
        }
      ],
      isIntactList: [
        {
          name: "正常",
          id: 1
        },
        {
          name: "异常",
          id: 2
        }
      ],
      customRules: {
        companyName: [
          { required: true, message: "请录入单位名称", trigger: "blur" }
        ]
      },
      customerDialogStatus: "create",
      customerDialogVisible: false,
      transferDialogVisible: false,
      departmentArray: [],
      customerActiveName: "1",
      factorData: [],
      factorForm: {
        checkCount: 1,
        CountType: "",
        reportAmountRate: 10,
        expediteAmountRate: 0,
        laborAmount: "",
        tripAmount: "",
        taxAmountRate: 6
      },
      factorRules: {},
      priceArray: [],
      innerPriceVisible: false,
      addPriceForm: {
        selfName: "",
        amount: 0.0
      },
      uploadVisible: false,
      excelFileList: [],
      fileResult: "",
      selectRowid: null,
      Selection: {},
      multipleselection: []
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    getDicKey(type, code) {
      getDicKey(code).then(result => {
        if (result.code === 200) {
          this[type] = result.result;
        }
      });
    },

    handleSearch() {
      customerServer.Workingwithrecords(this.searchForm).then(res => {
        console.log(res);
        if (res.code === 200 && res.result) {
          this.customerData = res.result.records || [];
          this.total = res.result.total;
        }
      });
    },
    changeStartEnd() {
      console.log(this.startEnd);
      if (this.startEnd.length != 0) {
        this.searchForm.start = this.startEnd[0];
        this.searchForm.end = this.startEnd[1];
        customerServer.deviceUseRecordDetail(this.searchForm).then(res => {
          if (res.code === 200 && res.result) {
            // console.log(res);
            this.transferTableData = res.result.records || [];
            this.total = res.result.total;
          }
        });
      }
    },

    handleTransfer(row) {
      this.chooseSearchForm = row;
      console.log(this.chooseSearchForm);
      this.searchForm.id = row.id;
      this.transferDialogVisible = true;
      customerServer.deviceUseRecordDetail(this.searchForm).then(res => {
        if (res.code === 200 && res.result) {
          // console.log(res);
          this.transferTableData = res.result.records || [];
          this.total = res.result.total;
        }
      });
    },
    handleUpdate1(row) {
      console.log(1111);
      this.customerDialogVisible = true;
      console.log(row);
      this.customForm1 = row;
      if (this.customForm1.subList == null) {
        this.customForm1.name = "";
        this.customForm1.number = "";
      }
    },
    // 重置
    handleCreate() {
      this.clearForm();
      this.customerDialogStatus = "create";
      this.customerDialogVisible = true;
    },
    confirmDialog() {
      this.$refs.customForm1.validate(valid => {
        if (valid) {
          customerServer
            .updateUseRecord(this.customForm1)
            .then(request => {
              this.$notify({
                title: "成功",
                message: request.message,
                type: "success"
              });
              this.handleSearch();
              this.customerDialogVisible = false;
              this.$refs.customForm.resetFields();
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    },
    confirmCreate() {
      this.$refs.customForm.validate(valid => {
        if (valid) {
          customerServer
            .addCusContBase(this.customForm)
            .then(request => {
              this.$notify({
                title: "成功",
                message: request.message,
                type: "success"
              });
              this.handleSearch();
              this.customerDialogVisible = false;
              this.$refs.customForm.resetFields();
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    },
    confirmUpdate() {
      this.$refs.customForm.validate(valid => {
        if (valid) {
          customerServer
            .modifyCusContBaseById(this.customForm)
            .then(request => {
              this.$notify({
                title: "成功",
                message: request.message,
                type: "success"
              });
              this.handleSearch();
              this.customerDialogVisible = false;
              this.$refs.customForm.resetFields();
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    },

    singleElection(row) {
      this.selectRowid = row.userId;
    },
    confirmTransfer() {
      const data = {
        id: this.selectedId,
        type: "1"
      };
      customerServer.postTransferBase(data).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success"
          });
          this.transferDialogVisible = false;
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "error"
          });
          this.transferDialogVisible = false;
        }
      });
    },
    clearForm() {
      this.customForm = {
        cusContBaseInfoId: "",
        jobId: "",
        projectName: "",
        classType: "",
        department: "",
        userName: "",
        end: "",
        start: "",
        isIntact: "",
        subList: [
          {
            id: "",
            name: "",
            number: ""
          }
        ]
      };
    },
    handleDownloadData() {
      if (this.multipleselection.length != 0) {
        var url =
          "/api/excel/exportDeviceUse?id=" + this.Selection + "&type=" + "2";
        window.open(url);
        this.transferDialogVisible = false;
        this.searchForm.start = "";
        this.searchForm.end = "";
        this.startEnd = "";
      } else {
        this.$message({
          message: "最少选择一条使用记录",
          type: "warning"
        });
      }
    },
    customUploadChange(file) {
      if (file.status === "ready") return;
      if (file.status === "success") {
        const res = file.response || {};
        if (res && res.code === 200) {
          this.fileResult = file.response.result;
          this.$message({
            type: "success",
            message: file.response.message
          });
          this.handleSearch();
          this.uploadVisible = false;
        } else {
          this.$message.error("上传失败!");
          this.excelFileList = [];
        }
      } else {
        this.$message.error("上传失败!");
        this.excelFileList = [];
      }
    },
    handleUpload() {
      this.uploadVisible = true;
      this.excelFileList = [];
      this.fileResult = "";
    },
    /** 导出按钮操作 */
    handleDownload() {
      if (this.multipleselection.length != 0) {
        var url =
          "/api/excel/exportDeviceUse?id=" + this.Selection + "&type=" + "1";
        window.open(url);
      } else {
        this.$message({
          message: "最少选择一条使用记录",
          type: "warning"
        });
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleselection = val;
      var arr = [];
      for (var item of val) {
        console.log(item.id);
        arr.push(item.id);
        console.log(arr + []);
        this.Selection = arr + [];
      }
    }
  }
};
</script>

<style scoped lang="scss" type="text/scss">
.install-title {
  display: flex;
  align-items: center;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
  background-color: #d7dae2;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.time-dot {
  text-align: center;
  justify-content: center;
  padding-top: 4px;
  position: relative;
  border-radius: 50%;
  background: #dfe4ed;
  height: 25px;
  width: 25px;
  left: -7px;
}
.search_div {
  > div {
    &:nth-child(1) {
      margin-right: 10px;
    }
    display: inline-block;
  }
}

.search_input {
  width: 200px;
  margin-bottom: 5px;
}
.search-right {
  text-align: right;
  padding-right: 25px;
}
.item {
  font-size: 16px;
}
::v-deep .el-card .el-card__header {
  padding: 5px 20px;
  background: #f3f2f2;
}
</style>
